@import "common";

body{
  min-width: 320px;
  margin: 0 auto;
  width: 15rem;
  line-height: 1.5;
  font-family: Arial,Helvetica;
  background-color: white;
  background-size: cover;


}
*{
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
}

.header{
  width: 15rem;
  height: 5.84rem;
  background: url("../img/bd-head.jpg") no-repeat;
  background-size: cover;
  .header-icon{
    width: 15rem;
    height: 1.76rem;
    padding: 0.63rem 0.3rem;
    box-sizing: border-box;
    .icon{
      width: 14.4rem;
      height: 0.48rem;
      //background-color: #46b8da;
      //overflow: hidden;
      position: relative;

      img{
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }
  }
  .header-select{
    width: 15rem;
    height: 2.56rem;
    //display: flex;
    //flex-direction: row;
    //justify-content: flex-end;
    //align-items: center;
    span{
      display: inline-block;
      width: 1.28rem;
      height: 1.28rem;
      background-color: rgba(0,0,0,.3);
      float: right;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      i{
        font-size: 0.8rem;
        color: white;
      }
    }
    .menu{
      margin-right: 0.64rem;
      margin-left: 0.32rem;


    }

}

}
.bd{
  width: 15rem;

  background-color: rgb(22,24,35);
  margin-bottom: 3.4rem;
  .title{
    width: 100%;
    height: 2.88rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    .user-portrait{
      width: 3.6rem;
      height: 3.6rem;
      position: absolute;
      top: -0.72rem;
      left: 0.64rem;
      border: 2px solid #161823;
      border-radius: 45px;
      img{
        width: 100%;
        height: 100%;
      }


    }
    .friend{
      width: 2.88rem;
      height: 1.44rem;
      margin:0 0.64rem 0 0.16rem;
      background: #383a44;
      display: flex;
      align-items: center;
      .plus{
        display: inline-block;
        width: 0.64rem;
        height: 0.64rem;
        margin: 0.4rem 0 0.4rem 0.48rem;
        position: relative;
        i{
          position: absolute;
          font-size: 0.64rem;
          -webkit-text-stroke:0.08rem #383a44;
          color: white;
        }
      }
      .friend-text{
        display: inline-block;
        height: 1.44rem;
        font-size: 0.56rem;
        font-family: PingFang SC, PingFang SC-Normal;
        color: white;
        line-height: 1.44rem;
      }
    }
    .info{
      width: 6.32rem;
      height: 1.44rem;

      background: #383a44;
      display: flex;
      align-items: center;
      .edit{
        display: inline-block;
        height: 1.44rem;
        font-size: 0.56rem;
        margin:0.32rem 0.16rem 0.32rem 1.32rem;
        font-family: PingFang SC, PingFang SC-Normal;
        color: white;
        line-height: 1.44rem;
      }
      .edit-percent{
        opacity: 0.3;
        font-size: 0.56rem;
        font-family: PingFang SC, PingFang SC-Normal;
        font-weight: Normal;
        text-align: center;
        color: #ffffff;
      }

    }
  }
  .user-info{
    width: 15rem;
    padding-left: 0.64rem;
    margin-top: 0.96rem;
    box-sizing: border-box;
    .user-name{
      font-size: 0.96rem;
      font-family: PingFang SC, PingFang SC-Normal;
      font-weight: Normal;
      color: #ffffff;
    }
    .user-member{
      margin-top: 0.32rem;

      opacity: 0.3;
      font-size: 0.48rem;
      font-family: PingFang SC, PingFang SC-Normal;
      font-weight: Normal;
      color: #ffffff;
      span:first-child{
        margin-right: 0.32rem;
      }
    }
   .hr{
     width: 13rem;
     margin-top: 0.8rem;
     margin-right: 0.64rem;
     border-bottom: 1px rgba(32,33,44,.8) solid;
   }
    .user-introduce{
      margin-top: 0.64rem;
      opacity: 0.8;
      font-size: 0.56rem;
      font-family: PingFang SC, PingFang SC-Normal;
      font-weight: Normal;
      text-align: left;
      color: #ffffff;
    }
    .add_info{
      margin-top: 0.64rem;
      width: 5.64rem;
      height: 0.8rem;
      background: #242630;
      font-size: 12px;
      font-family: Microsoft YaHei, Microsoft YaHei-Normal;
      font-weight: Normal;
      text-align: center;
      color: #555555;
      line-height: 0.8rem;
    }
    .user_achievement{
      margin-top: 1.08rem;

      height: 0.8rem;

      ul{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        :first-child{
          padding: 0;
        }
        li{
          list-style: none;
          line-height: 0.8rem;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.56rem;
          font-family: PingFang SC, PingFang SC-Normal;
          font-weight: Normal;
          color: #ffffff;
          height: 0.8rem;
          padding-left: 0.96rem;

          .zan{
            opacity: 0.8;
            margin-right: 0.16rem;
          }
          .type_text{
            opacity: 0.3;
          }
        }
      }
    }
  }
  .user_video{
    margin-top: 1.44rem;
    width: 15rem;

    .user_tag{
      width: 15rem;
      height: 1.6rem;
      ul{
        display: flex;
        justify-content: flex-start;
        align-items: center;

        li{
          list-style: none;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.56rem;
          font-family: Microsoft YaHei, Microsoft YaHei-Normal;
          font-weight: Normal;
          text-align: center;
          color: rgba(255,255,255,0.31);
          span{
            display: inline-block;
            box-sizing: border-box;
            height: 1.6rem;
            line-height: 1.6rem;
          }
        }
        .current{
          color: white;
          border-bottom: 0.16rem solid rgba(250, 206, 21,1);
        }
      }
    }
    .user_tag_video{
      width: 15rem;
      ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        background-color: rgb(22,24,35);
        align-content: flex-start;
        li{
          list-style: none;
          position: relative;
          width: 33%;
          height: 7rem;
          font-size: 1.2rem;
          border-left: 1px solid rgba(0,0,0,.5);
          border-bottom: 1px solid rgba(0,0,0,.5);
          img{
            width: 100%;
            height: 100%;
          }
           .after{
             position: absolute;
             left: 16px;
             bottom: 6px;
             z-index:2;
             display: flex;
             justify-content: flex-start;
             align-items: center;
             i{
               font-size: 16px;
               color: white;
               //color: white;
             }
             span{
               padding-left: 0.2rem;
               color: white;
               font-size: 0.56rem;
               font-family: Microsoft YaHei, Microsoft YaHei-Normal;
               font-weight: Normal;
             }
           }


        }
        :nth-child(3n+1){
          border-left: 0;
        }
      }
    }

  }
}
@keyframes move_menu {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes leave_menu {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
.main_menu{
  width: 10rem;
  height:  100vh;
  background: #161823;
  text-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  transform: translateX(100%);
  .bar{
    width: 100%;
    padding-top: 2.12rem;
    ul{
      display: flex;
      flex-direction: column;
      justify-content: center;

      li{
        list-style: none;
        width: 100%;
        height: 2rem;
        padding-left: 0.96rem;
        line-height: 2rem;

        .icon{
          font-size: 0.64rem;
          color: white;
          margin-right: 0.3rem;
        }
        .icon_text{
          font-size: 0.56rem;
          font-family: PingFang SC, PingFang SC-Normal;
          font-weight: Normal;
          text-align: left;
          color: #ffffff;
        }
      }
    }
  }
  .more{
    width: 8.08rem;
    height: 1.6rem;
    background: #383a44;
    margin: 1.28rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    i{
      font-size: 0.64rem;
      color: white;
    }
    .more_function{
      margin-left: 0.32rem;
      font-size: 0.56rem;
      font-family: PingFang SC, PingFang SC-Normal;
      font-weight: Normal;
      text-align: left;
      color: white;
    }
  }

}
.foot{
  z-index: 996;
  width: 15rem;
  height: 3.4rem;
  position: fixed;
  bottom: 0;
  background-color: black;
  .select{
    width: 100%;
    height: 1.96rem;
    ul{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .me{
        color: white;
        span{
          border-bottom: 2px solid white;
        }
      }
      li{
        width: 20%;
        flex: 1;
        list-style: none;
        font-size: 0.64rem;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        text-align: center;
        color: rgba(255,255,255,0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        span{
        display: inline-block;
        box-sizing: border-box;
        height: 1.96rem;
        line-height: 1.96rem;
      }

        .plus{
          width: 1.33rem;
          height: 0.9rem;
          border: 0.08rem white solid;
          border-radius: 0.2rem;
          display: flex;
          justify-content: center;
          align-items: center;
          i{
            color: white;
            font-size: 0.56rem;
          }
        }

      }

    }
  }
  .footer{
    width: 100%;
    height: 1.44rem;
    position: relative;
    .mid{
      position: absolute;
      left: 50%;
      bottom: 0.32rem;
      transform: translateX(-50%);
      width: 5.36rem;
      height: 0.2rem;
      background-color: white;
      border-radius:0.1rem;
    }
  }
}